<template>
  <view class="container screen-width">
    <u-form :model="form" ref="uForm" :error-type="['toast']">
      <view class="box">
        <view class="box-item u-flex u-row-between">
          <view class="name">原手机号</view>
          <view class="right">{{ oldTel }}</view>
        </view>
        <view class="box-item u-flex">
          <view class="name">新手机号</view>
          <u-form-item label prop="newPhoneNumber" :border-bottom="false">
            <u-input v-model="form.newPhoneNumber" placeholder="请输入新手机号" :clearable="false" />
          </u-form-item>
        </view>
        <view class="box-item u-flex u-row-between">
          <view class="name">验证码</view>
          <u-form-item label prop="newPhoneNumberCode" :border-bottom="false">
            <u-input v-model="form.newPhoneNumberCode" placeholder="请输入验证码" :clearable="false" />
          </u-form-item>
          <view>
            <view class="btn" @click="getCode2">{{ tips2 }}</view>
            <u-verification-code seconds="60" ref="uCode2" @change="code2Change" unique-key="code2"></u-verification-code>
          </view>
        </view>
      </view>
    </u-form>
    <view class="submitBtn screen-width" @click="submit">提交</view>
    <Festival></Festival>
  </view>
</template>

<script>
import { getCode } from "../../util/api/user";
export default {
  data() {
    return {
      oldTel: "",
      tips1: "",
      tips2: "",
      form: {
        newPhoneNumber: "",
        newPhoneNumberCode: ""
      },
      rules: {
        // oldTelCode: [
        //   {
        //     required: true,
        //     message: "请输入旧手机号验证码",
        //   },
        // ],
        newPhoneNumber: [
          {
            required: true,
            message: "请输入新手机号"
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "新手机号码不正确"
          }
        ],
        newPhoneNumberCode: [
          {
            required: true,
            message: "请输入新手机号验证码"
          }
        ]
      }
    };
  },
  onLoad(query) {
    this.oldTel = query.value;
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    code1Change(text) {
      this.tips1 = text;
    },
    code2Change(text) {
      this.tips2 = text;
    },
    submit() {
      let _this = this;
      uni.showLoading();
      let obj = {
        newPhoneNumber: this.form.newPhoneNumber,
        newPhoneNumberCode: this.form.newPhoneNumberCode
      };
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.$post(
            "/bmj-api/api/ums/umsUsers/updatePhoneNumber?newPhoneNumber=" +
              this.form.newPhoneNumber +
              "&newPhoneNumberCode=" +
              this.form.newPhoneNumberCode
          ).then(res => {
            uni.hideLoading();
            if (res.code == 500) {
              uni.showToast({
                title: res.message,
                duration: 2000,
                icon: "none"
              });
            } else {
              uni.showToast({
                title: "修改成功",
                duration: 2000,
                icon: "none"
              });
              uni.hideLoading();
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/mime/profile"
                });
              }, 1000);
            }
          });
        }
      });
    },
    getCode1() {
      if (!this.$u.test.mobile(this.oldTel)) {
        this.$u.toast("请输入正确的旧手机号");
        return;
      }
      if (this.$refs.uCode1.canGetCode) {
        this.$refs.uCode1.start();
        // uni.showLoading();
        getCode({
          phoneNumber: this.oldTel,
          type: "UpdatePhoneNumber"
        }).then(res => {
          //uni.hideLoading();
          this.$u.toast("验证码已发送");
        });
      }
    },
    getCode2() {
      if (!this.$u.test.mobile(this.form.newPhoneNumber)) {
        this.$u.toast("请输入正确的新手机号");
        return;
      }
      if (this.$refs.uCode2.canGetCode) {
        this.$refs.uCode2.start();
        // uni.showLoading();
        getCode({
          phoneNumber: this.form.newPhoneNumber,
          type: "UpdatePhoneNumber"
        }).then(res => {
          //uni.hideLoading();
          this.$u.toast("验证码已发送");
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  position: relative;

  .submitBtn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 88rpx;
    background: #1678ff;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
  }
}
.box {
  margin-top: 20rpx;
  padding: 0 30rpx;
  background: #fff;
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;

  &-item {
    height: 100rpx;
    border-bottom: 1rpx solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .name {
      // margin-right: 72rpx;
    }
  }

  .btn {
    height: 64rpx;
    opacity: 1;

    background: #e8f3ff;
    border-radius: 8rpx;
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #1678ff;
    padding: 14rpx 10rpx;
  }
}
</style>
